<template>
  <div class="app-container">
    <el-row  :gutter="16" class="mb8">
      <el-button v-if="single"  @click="modeSwitch" type="primary">地图查看</el-button>
      <el-button v-if="multiple" @click="modeSwitch" type="success">列表查看</el-button>
      <span v-show="buttons" style="margin-left: 10px">
        <el-button type="primary" @click="handleLocation">实时定位</el-button>
        <el-button type="primary" style="margin-left: 10px" @click="getAlert">报警信息</el-button>
        <el-button type="primary" @click="openControl" >远程控制</el-button>
        <el-popover
          placement="bottom"
          title="请选择时间段"
          trigger="click"
          v-model="track"
        >
          <div style="margin: 10px">
            <div>
              <el-date-picker
                v-model="dateTime"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                value-format="yyyyMMddHHmmss"
              >
              </el-date-picker>
            </div>
            <div style="padding-top: 10px;float: right" >
              <el-button type="primary" @click="trackView" >确定</el-button>
            </div>
          </div>
          <el-button slot="reference" type="primary" style="margin-left: 10px" @click="getNowFormatDate" >轨迹查看</el-button>
        </el-popover>
      </span>
    </el-row>

    <!--    列表部分开始-->
    <div v-if="single">
      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="姓名" prop="equipmentModel">
          <el-input
            v-model="nickName"
            placeholder="请输入设备姓名"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="电话" prop="imei">
          <el-input
            v-model="phonenumber"
            placeholder="请输入电话"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="设备编号" prop="equipmentNumber">
          <el-input
            v-model="queryParams.equipmentNumber"
            placeholder="请输入设备编号"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="loading" :data="equipmentList" >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="姓名" align="center" prop="lkUser.nickName" />
        <el-table-column label="电话" align="center" prop="lkUser.phonenumber" />
        <el-table-column label="地址" align="center" prop="lkUser.address" width="300" />
        <el-table-column label="车辆型号" align="center" prop="vehicleModel" />
        <el-table-column label="设备编号" align="center" prop="equipmentNumber" />
        <el-table-column label="IMEI号" align="center" prop="imei" />
        <el-table-column label="物联网卡号" align="center" prop="cardNumber" />
        <el-table-column label="激活时间" align="center" prop="activateTime" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.activateTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="到期时间" align="center" prop="dueTime" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.dueTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-position"
              @click="handleLocation(scope.row)"
            >定位</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleUnbind(scope.row)"
              v-hasPermi="['base:equipment:remove']"
            >解除绑定</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
<!--    列表部分结束-->
<!--    地图部分开始-->
    <div v-show="multiple" style="position: relative">
      <baidu-map :center="center" :zoom="zoom" style="width: 100%;height: 680px"  :scroll-wheel-zoom="true" @ready="handler">
        <bm-marker v-if="pageIndex==1"  :position="markerPoint"  animation="BMAP_ANIMATION_BOUNCE" @click="infoWindowOpen" :icon="{url: iconCar, size: {width: 57, height: 51}}" >
        </bm-marker>

        <bm-circle v-if="vf.status == 0" :center="circlePath.center" :radius="circlePath.radius" stroke-color="red" :stroke-opacity="0.5" :stroke-weight="2" ></bm-circle>
        <bm-polyline v-if="pageIndex==4" :path="polylinePath" stroke-color="blue" :stroke-opacity="0.5" :stroke-weight="5"  ></bm-polyline>
        <bm-point-collection v-if="pageIndex==4" :points="points" shape="BMAP_POINT_SHAPE_RHOMBUS" size="BMAP_POINT_SIZE_BIG" @click="clickHandler">
        </bm-point-collection>
        <bm-marker v-if="pageIndex==0 && item.location"  v-for="(item,index) in equipmentMarkList"  :position="{lng:item.location.baidu[1],lat:item.location.baidu[0]}"  animation="BMAP_ANIMATION_BOUNCE" @click="markWindowOpen(item)" :icon="{url: iconCar, size: {width: 57, height: 51}}">
        </bm-marker>
        <!-- 信息窗体 -->
        <bm-info-window :position="markerPoint" :show="infoWindowShow" @close="infoWindowClose" @open="infoWindowOpen">
          <div style="width:500px;font-size:14px">
            <el-divider content-position="center">设备信息</el-divider>
            <div style="width: 100%;margin-bottom: 5px">
                <span style="display:inline-block;width: 25%;">
                  <span>车主姓名:</span>
                  <span>{{ equipment.lkUser.nickName }}</span>
                </span>
              <span style=" display:inline-block;width: 40%;">
                  <span>车主手机:</span>
                  <span>{{ equipment.lkUser.phonenumber }}</span>
                </span>
              <span style=" display:inline-block;width: 35%;">
                  <span>设备编号:</span>
                  <span>{{ equipment.equipmentNumber }}</span>
                </span>
            </div>
            <div style="width: 100%;margin-bottom: 5px">
                <span style="display:inline-block;width: 50%">
                  <span>IMEI号:</span>
                  <span>{{equipment.imei }}</span>
                </span>
              <span style="display:inline-block;width: 50%">
                  <span>物联卡号:</span>
                  <span>{{ equipment.cardNumber }}</span>
                </span>
            </div>
            <el-divider content-position="center">定位信息</el-divider>
            <div style="width: 100%;margin-bottom: 5px">
                <span style="display:inline-block;width: 40%">
                  <span>定位状态:</span>
                  <span>卫星定位</span>
                </span>
              <span style="display:inline-block;width: 60%">
                  <span>定位时间:</span>
                  <span>{{ location.time }}</span>
                </span>
            </div>
            <div style="width: 100%;margin-bottom: 5px">
                <span style="display:inline-block;width: 60%">
                  <span>坐标:</span>
                  <span>经度{{ location.baidu[1] }}/纬度{{ location.baidu[0] }}</span>
                </span>
              <span style="display:inline-block;width: 40%">
                  <span>行驶方向:</span>
                  <span>{{ headingFormat(location.heading) }}</span>
                </span>
            </div>
            <div style="width: 100%;margin-bottom: 5px">
                <span style="display:inline-block;width: 100%">
                  <span>地址:</span>
                  <span>{{ address }}</span>
                </span>
            </div>
            <div style="width: 100%;margin-bottom: 5px">
                <span style="display:inline-block;width: 33%">
                  <span>海拔高度:</span>
                  <span>{{ location.alt }}米</span>
                </span>
              <span style="display:inline-block;width: 33%">
                  <span>行驶速度:</span>
                  <span>{{ location.speed/10 }}千米/小时</span>
                </span>
              <span style="display:inline-block;width: 33%">
                  <span>参与卫星:</span>
                  <span>{{ location.num }}个</span>
                </span>
            </div>
            <div v-if="pageIndex==1 ||pageIndex==0">
              <el-divider content-position="center">设备状态</el-divider>
              <div style="width: 100%;margin-bottom: 5px">
                 <span style="display:inline-block;width: 33%">
                  <span>锁车状态:</span>
                  <span>{{status.io_lck == 1?"已锁":"未锁"}}</span>
               </span>
                <span style="display:inline-block;width: 33%">
                  <span>车辆钥匙门儿:</span>
                  <span>{{ status.acc == 1 ?"开启":"关闭" }}</span>
                </span>
                <span style="display:inline-block;width: 33%">
                  <span>电子钥匙门儿:</span>
                  <span>{{ status.io_acc == 1?"开启":"关闭" }}</span>
                </span>

              </div>
              <div style="width: 100%;margin-bottom: 5px">
                  <span style="display:inline-block;width: 33%">
                    <span>卫星定位:</span>
                    <span>{{ status.located == 1?"已定位":"未定位" }}</span>
                  </span>
                <span style="display:inline-block;width: 33%">
                    <span>主电源:</span>
                    <span>{{ status.mpower == 1?"接通":"断开" }}</span>
                  </span>
                <span style="display:inline-block;width: 33%">
                    <span>在线状态:</span>
                    <span>{{status.online == 1 ? "在线" : "离线"}}</span>
                  </span>

              </div>
              <div style="width: 100%;margin-bottom: 5px">
                <span style="display:inline-block;width: 33%">
                  <span>车门:</span>
                  <span>{{ status.door == 1?"已锁":"未锁" }}</span>
                </span>
                <span style="display:inline-block;width: 33%">
                  <span>电池电压:</span>
                  <span>{{status.voltage}}V</span>
                </span>
                <span style="display:inline-block;width: 33%">
                  <span>备用电池电压:</span>
                  <span>{{status.battery_voltage}}V</span>
                </span>
              </div>
            </div>
          </div>
        </bm-info-window>
      </baidu-map>

      <!--弹窗-->
      <el-drawer
        title="报警信息"
        :visible.sync="drawer"
        direction="rtl"
        style="top:10%;"
        :append-to-body="true"
        >
        <div style="height:94%;overflow-y: auto;">
          <ul>
            <li v-for="(alarm,index) in retrieveAlarm">{{alarm.alarmInfo}}</li>
          </ul>
        </div>
      </el-drawer>

      <div v-show="control" style="width:200px;height: 500px;position: absolute;top:5%;left:0">
          <el-button type="primary" style="width: 90%;margin: 5px" plain @click="controlCar(2,'1')">开启钥匙门儿</el-button>
          <el-button type="primary" style="width: 90%;margin: 5px" plain @click="controlCar(2,'0')">关闭钥匙门儿</el-button>
          <el-button type="primary" style="width: 90%;margin: 5px" plain @click="controlCar(3,'1')">远程锁车</el-button>
          <el-button type="primary" style="width: 90%;margin: 5px" plain @click="controlCar(3,'0')">远程解锁</el-button>
          <el-button type="primary" style="width: 90%;margin: 5px" plain @click="controlCar(1,'1')">开启语音寻车</el-button>
          <el-button type="primary" style="width: 90%;margin: 5px" plain @click="controlCar(1,'0')">关闭语音寻车</el-button>
          <el-button type="primary" style="width: 90%;margin: 5px" plain @click="controlCar(6,'1')">开启门锁</el-button>
          <el-button type="primary" style="width: 90%;margin: 5px" plain @click="controlCar(6,'0')">关闭门锁</el-button>
          <el-button type="primary" style="width: 90%;margin: 5px"  plain @click="through" >重启设备</el-button>
          <el-button type="primary" style="width: 90%;margin: 5px" plain @click="checkStatus">查看设备状态</el-button>
          <el-button type="primary" style="width: 90%;margin: 5px" plain  @click="openvf">开启电子围栏</el-button>
          <el-button type="primary" style="width: 90%;margin: 5px" plain  @click="closevf">关闭电子围栏</el-button>
      </div>
      <div  v-if="statusOpen" style="width:200px;background:#ffffff;position: absolute;top:5%;left:200px">
       <div style="margin-top: 5px">
         <h3 style="margin-left: 10px;color: #1890ff">设备状态</h3>
         <ul class="list-group list-group-striped" style="margin-right: 1%;">
           <li class="list-group-item" >
             <el-row>
               <el-col :span="24" style="color: #1890ff">
                 锁车状态:
                 <div class="pull-right" style="margin-right: 10%">{{status.io_lck == 1?"已锁":"未锁"}}</div>
               </el-col>
             </el-row>
           </li>
           <li class="list-group-item">
             <el-row>
               <el-col :span="24" style="color: #1890ff">
                 车辆钥匙门儿:
                 <div class="pull-right" style="margin-right: 10%">{{ status.acc == 1 ?"开启":"关闭" }}</div>
               </el-col>
             </el-row>
           </li>
           <li class="list-group-item">
             <el-row>
               <el-col :span="24" style="color: #1890ff">
                 电子钥匙门儿:
                 <div class="pull-right" style="margin-right: 10%">{{ status.io_acc == 1?"开启":"关闭" }}</div>
               </el-col>
             </el-row>
           </li>
           <li class="list-group-item">
             <el-row>
               <el-col :span="24" style="color: #1890ff">
                 卫星定位:
                 <div class="pull-right" style="margin-right: 10%">{{ status.located == 1?"已定位":"未定位" }}</div>
               </el-col>
             </el-row>
           </li>
           <li class="list-group-item">
             <el-row>
               <el-col :span="24" style="color: #1890ff">
                 主电源:
                 <div class="pull-right" style="margin-right: 10%">{{ status.mpower == 1?"接通":"断开" }}</div>
               </el-col>
             </el-row>
           </li>
           <li class="list-group-item">
             <el-row>
               <el-col :span="24" style="color: #1890ff">
                 在线状态:
                 <div class="pull-right" style="margin-right: 10%">{{status.online == 1 ? "在线" : "离线"}}</div>
               </el-col>
             </el-row>
           </li>
           <li class="list-group-item">
             <el-row>
               <el-col :span="24" style="color: #1890ff">
                 车门:
                 <div class="pull-right" style="margin-right: 10%">{{ status.door == 1?"已锁":"未锁" }}</div>
               </el-col>
             </el-row>
           </li>
           <li class="list-group-item">
             <el-row>
               <el-col :span="24" style="color: #1890ff">
                 电池电压:
                 <div class="pull-right" style="margin-right: 10%">{{status.voltage}}V</div>
               </el-col>
             </el-row>
           </li>
           <li class="list-group-item">
             <el-row>
               <el-col :span="24" style="color: #1890ff">
                 备用电池电压:
                 <div class="pull-right" style="margin-right: 10%">{{status.battery_voltage}}V</div>
               </el-col>
             </el-row>
           </li>
         </ul>
       </div>
      </div>
    </div>
<!-- 地图部分结束-->
  </div>
</template>

<script>
import {
  exportEquipment,
  listEquipmentUser,
  unbindEquipment,
  location,
  status,
  track,
  listUserEquipment,
  retrieveAlarm,
  control,
  through2,
  queryvf, openvf, closevf
} from "@/api/base/equipment";
import iconCar from "@/assets/images/icon_car.png";

export default {
  name: "EquipmentUser",
  components: {
  },
  data() {
    return {
      circlePath: {
        center: {
          lng: 117.012166,
          lat: 36.006354
        },
        radius: 100
      },
      iconCar:iconCar,
      polylinePath: [
      ],
      points: [],
      center: {lng: 0, lat: 0},
      zoom:0,
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 列表查看
      single: true,
      // 地图查看
      multiple: false,
      pageIndex:1,
      // 显示搜索条件
      showSearch: true,
      equipmentList:[],
      //用户设备(带定位)
      equipmentMarkList:[
        {
          location:{
            baidu:[0,0]
          }
        }
      ],
      //报警信息
      retrieveAlarm:[],
      equipment:{
        lkUser:{
          nickName:null,
          phonenumber:null
        }
      },
      // 总条数
      total: 0,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      drawer:false,
      control:false,
      dateTime: ['20210825000000','20210825000000'],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        equipmentNumber: null,
      },
      nickName:"",
      phonenumber:"",
      //轨迹查看时间选择层
      track:false,
      buttons:false,
      markerPoint: {lng:'',lat:''},
      location: {
        baidu:[0,0]
      },
      status:{},
      statusOpen:false,
      vf:{
        status:3,
        baidu:[0,0]
      },
      infoWindowShow:false,
      infoWindowShow1:false,
      equipmentNumber:null,
      equipmentId:null,
      // 表单参数
      form: {},
      myGeo:null,
      address:''
    };
  },
  created() {
    this.getList();
    //this.getNowFormatDate();
  },
  methods: {
    handler ({BMap, map}) {
      this.center.lng = 116.404
      this.center.lat = 39.915
      this.zoom = 15
      this.myGeo = new BMap.Geocoder();
    },
    getAddress(point){
      let that = this;
      this.myGeo.getLocation(point,function(result){
       that.address = result.address
      });
    },
    getNowFormatDate(){
      var years, months, days, hours, minutes, seconds;
      var intYears, intMonths, intDays, intHours, intMinutes, intSeconds;
      var today;
      today = new Date(); //系统当前时间
      intYears = today.getFullYear(); //得到年份,getFullYear()比getYear()更普适
      intMonths = today.getMonth() + 1; //得到月份，要加1
      intDays = today.getDate(); //得到日期
      intHours = today.getHours(); //得到小时
      intMinutes = today.getMinutes(); //得到分钟
      intSeconds = today.getSeconds(); //得到秒钟
      years = intYears + "";
      if (intMonths < 10) {
        months = "0" + intMonths + "";
      } else {
        months = intMonths + "";
      }
      if (intDays < 10) {
        days = "0" + intDays + "";
      } else {
        days = intDays + "";
      }
      if (intHours == 0) {
        hours = "00";
      } else if (intHours < 10) {
        hours = "0" + intHours + "";
      } else {
        hours = intHours + "";
      }
      if (intMinutes < 10) {
        minutes = "0" + intMinutes + "";
      } else {
        minutes = intMinutes + "";
      }
      if (intSeconds < 10) {
        seconds = "0" + intSeconds + "";
      } else {
        seconds = intSeconds + "";
      }
      //this.dateTime[1] = years+months+days+hours+minutes+seconds;
      let endTime = years+months+days+hours+minutes+seconds;
      let day1 = new Date();
      day1.setTime(day1.getTime()-24*60*60*1000);
      let intYears1 = day1.getFullYear(); //得到年份,getFullYear()比getYear()更普适
      let intMonths1 = day1.getMonth() + 1; //得到月份，要加1
      let intDays1 = day1.getDate(); //得到日期
      let years1 = intYears1 + "";
      let months1,days1;
      if (intMonths1 < 10) {
        months1 = "0" + intMonths1 + "";
      } else {
         months1 = intMonths1 + "";
      }
      if (intDays1 < 10) {
        days1 = "0" + intDays1 + "";
      } else {
        days1 = intDays1 + "";
      }
      let startTime=years1+months1+days1+hours+minutes+seconds;
      let date = [startTime,endTime]
      this.dateTime=date;
    },
    /** 查询设备管理列表 */
    getList() {
      this.loading = true;
      this.queryParams.params={}
      this.queryParams.params["nickName"] = this.nickName;
      this.queryParams.params["phonenumber"] = this.phonenumber;
      listEquipmentUser(this.queryParams).then(response => {
        this.equipmentList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    getMarkerList(){
      listUserEquipment().then(response => {
        this.equipmentMarkList = response.data;
        if(this.equipmentMarkList.length>0){
          this.center.lng=this.equipmentMarkList[0].location.baidu[1];
          this.center.lat=this.equipmentMarkList[0].location.baidu[0];
          this.zoom=9;
        }
      });

    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        equipmentModel: null,
        equipmentNumber: null,
        imei: null,
        cardNumber: null,
        installStatus: "0",
        activateStatus: "0",
        vehicleModel: null,
        vehicleColor: null,
        motorNumber: null,
        frameNumber: null,
        activateTime: null,
        dueTime: null,
        userId: null
      };
      this.resetForm("form");
    },
    headingFormat(heading){
      if(heading > 10 && heading < 80){
        return "北偏东"
      }else if(heading >= 80 && heading <= 100){
        return "东"
      }else if(heading >100 && heading <170){
        return "南偏东"
      }else if(heading >=170 && heading <=190){
        return "南"
      }else if(heading >190 && heading <260){
        return "南偏西"
      }else if(heading >=260 && heading <=280){
        return "西"
      }else if(heading >280 && heading <350){
        return "北偏西"
      }else {
        return "北"
      }

    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.nickName="";
      this.phonenumber="";
      this.resetForm("queryForm");
      this.handleQuery();
    },

    /** 删除按钮操作 */
    handleUnbind(row) {
      const ids = row.id || this.ids;
      this.$confirm('是否确认解除绑定编号为"' + row.equipmentNumber + '"的设备?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return unbindEquipment(row.id);
        }).then(() => {
          this.getList();
          this.msgSuccess("解除成功");
        })
    },

    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm('是否确认导出所有设备管理数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.exportLoading = true;
          return exportEquipment(queryParams);
        }).then(response => {
          this.download(response.msg);
          this.exportLoading = false;
        })
    },
    modeSwitch(){
      if(this.single){
        this.single=false;
        this.multiple=true;
        this.control=false;
        this.statusOpen=false;
        this.pageIndex=0;
        this.getMarkerList();

      }else {
        this.single=true;
        this.multiple=false;
        this.control=false;
        this.statusOpen=false;
        this.buttons=false;
      }
    },
    getAlert(){ //报警信息
      this.drawer=true;
      this.control=false;
      this.statusOpen=false;
      retrieveAlarm(this.equipmentNumber).then(response => {
        this.retrieveAlarm=response.data;
      });
    },
    openControl(){
      if (this.control){
        this.control=false;
        this.statusOpen=false
      }else {
        this.control=true;
        this.infoWindowShow = false;
        if (this.pageIndex == 4) {
          this.handleLocation("row");
        }
      }
    },
    controlCar(io,flag){
      this.statusOpen=false
      const query={
        equipmentNumber:this.equipment.equipmentNumber,
        io:io,
        flag:flag
      }
      control(query).then(response => {
        this.msgSuccess(response.msg);
      });
    },
    //定位
    handleLocation(row){
      if(row.id){
        this.equipmentId=row.id;
        this.equipmentNumber=row.equipmentNumber;
        this.equipment=row;
      }
      this.pageIndex=1;
      this.infoWindowShow = false;
      this.multiple=true;
      this.single=false;
      this.buttons=true;
      this.control=false;
      this.statusOpen=false;
      this.markerPoint.lng="";
      this.markerPoint.lat="";
      this.center.lng = 0;
      this.center.lat = 0;
      this.zoom=0;
      location(this.equipmentNumber).then(response => {
        this.location=response.data;
        let pt = new BMap.Point(this.location.baidu[1],this.location.baidu[0]);
        this.getAddress(pt);
        this.markerPoint.lng=this.location.baidu[1];
        this.markerPoint.lat=this.location.baidu[0];
        this.center.lng = this.location.baidu[1];
        this.center.lat = this.location.baidu[0]+0.0005;
        this.zoom=18;
      });
      this.status={};
      status(this.equipmentNumber).then(response => {
        this.status=response.data;
      });
      //查询围栏
      this.vf={}
      this.queryvf();
    },
    //重启设备
    through(){
      this.statusOpen=false;
      through2(this.equipmentNumber).then(response => {
        this.msgSuccess("设备重启成功")
      });
    },
    getStatus(){
      status(this.equipmentNumber).then(response => {
        this.status=response.data;
      });
    },
    //接口查询设备定位信息
    queryvf(){
      queryvf(this.equipmentNumber).then(response => {
        this.vf=response.data;
        if(this.vf.status == 0){
          this.circlePath.center.lng=this.vf.baidu[1];
          this.circlePath.center.lat=this.vf.baidu[0];
        }
      });
    },
    //接口查询设备定位信息
    openvf(){
      this.statusOpen=false;
      openvf(this.equipmentNumber).then(response => {
        this.queryvf()
        this.msgSuccess("开启电子围栏成功")
      });
    },
    //接口查询设备定位信息
    closevf(){
      this.statusOpen=false
      closevf(this.equipmentNumber).then(response => {
        this.queryvf()
        this.msgSuccess("关闭电子围栏成功")
      });
    },
    //轨迹查看
    trackView(){
      this.track=false;
      this.pageIndex=4;
      this.polylinePath=[];
      this.points=[];
      this.vf.status=3;
      this.infoWindowShow = false;
      this.control=false;
      this.statusOpen=false;
      const query={
        equipmentNumber:this.equipment.equipmentNumber,
        startTime:this.dateTime[0],
        endTime:this.dateTime[1]
      }
      track(query).then(response => {
        let location=response.data;
        if (location.length==0){
          this.msgInfo("该时间段内没有数据!")
          return
        }
        for (let i = 0; i < location.length; i++) {
          if(i==0){
            this.center.lng = location[i].baidu[1];
            this.center.lat = location[i].baidu[0];
            this.zoom=16;
          }
          this.polylinePath.push({lng:location[i].baidu[1],lat:location[i].baidu[0],location:location[i]})
          this.points.push({lng:location[i].baidu[1],lat:location[i].baidu[0],location:location[i]})
        }
      });

    },
    infoWindowClose () {
      this.infoWindowShow = false
    },
    infoWindowOpen () {
      this.infoWindowShow = true
    },
    markWindowOpen (item) {
      this.equipment=item;
      this.location=this.equipment.location;
      this.markerPoint.lng=this.location.baidu[1];
      this.markerPoint.lat=this.location.baidu[0];
      let pt = new BMap.Point(this.location.baidu[1],this.location.baidu[0]);
      this.getAddress(pt);
      status(this.equipment.equipmentNumber).then(response => {
        this.status=response.data;
      });
      this.infoWindowShow = true
    },

    clickHandler (e,target) {
      this.location=target.point.location
      let pt = new BMap.Point(this.location.baidu[1],this.location.baidu[0]);
      this.getAddress(pt);
      this.markerPoint.lng=this.location.baidu[1];
      this.markerPoint.lat=this.location.baidu[0];
      this.infoWindowShow = true
    },
    checkStatus(){
      if(this.statusOpen){
        this.statusOpen=false
      }else {
        this.getStatus();
        this.statusOpen=true;
      }
    }

  }
};
</script>

<style scoped lang="scss">
/*去除百度地图版权*/
.anchorBL{
  display:none;
}
ul li{
  color: red;
  margin: 10px;
}
</style>

